import { Button, Col, Form, Row } from "antd";
import styles from './index.less';
import InputType from "../InputType";
import { useState } from "react";

interface SearchFormProps {
    onFinish: (values: any) => void;
    list: listItem[]
}
//用于table搜索的区域
const SearchForm = (props: SearchFormProps) => {
    const [form] = Form.useForm();
    const [searchStatus, setsearchStatus] = useState(false)
    const splitString = 4
    //重置
    function onResetBtn() {
        form.resetFields()
        props.onFinish && props.onFinish({})
    }
    //数组二维格式化
    function ListTwoDimensionFormat(list: listItem[]) {
        let arr: listItem[][] = []
        let j = 0
        //补齐到最后一个让按钮有显示的空间
        let diff = 0
        if (list.length % splitString != 0) {
            diff = splitString - (list.length % splitString) - 1
        }
        if (list.length % splitString == 0) {
            diff = splitString - 1
        }
        for (let i = 0; i < diff; i++) {
            list.push({})
        }
        for (let i = 0; i < list.length; i++) {
            if (i % splitString == 0) {
                arr[j] = []
                j++
            }
            arr[j - 1].push(list[i])
        }
        return arr
    }
    let searchStatusVisisble = props.list.length > 8

    let formatList = ListTwoDimensionFormat(searchStatusVisisble && searchStatus ? props.list : props.list.filter((_item, index) => index < 7))
    return (
        <Form form={form} className={styles.FormWrap} onFinish={props.onFinish}>
            {
                formatList.map((item, index) => {
                    return (
                        <Row key={index} style={{ marginBottom: index < formatList.length - 1 ? "32px" : undefined }}>
                            {
                                item.map((jtem, jndex) => {
                                    //空白标签
                                    if (jtem.type === undefined) {
                                        return (
                                            <Col span={24 / splitString} key={jndex}></Col>
                                        )
                                    }
                                    return (
                                        <Col span={24 / splitString} key={jndex}>
                                            <Form.Item
                                                name={jtem.name}
                                                label={jtem.label}
                                                rules={jtem.rules}
                                                initialValue={jtem.initialValue}
                                                extra={jtem.extra}
                                                hidden={jtem.hidden}
                                                htmlFor={jtem.htmlFor}
                                                wrapperCol={jtem.wrapperCol}
                                                colon={jtem.colon}
                                                dependencies={jtem.dependencies}
                                                getValueFromEvent={jtem.getValueFromEvent}
                                                className={styles.FormItem} >
                                                <InputType {...jtem} />
                                            </Form.Item>
                                        </Col>
                                    )
                                })
                            }
                            {/* //显示按钮 */}
                            {
                                index == formatList.length - 1 ?
                                    <Col span={24 / splitString}>
                                        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
                                            <Button onClick={onResetBtn} style={{ marginRight: "8px" }}>重置</Button>
                                            <Button type="primary" htmlType="submit">查询</Button>
                                            {
                                                searchStatusVisisble ?
                                                    <div style={{ color: "#1677ff", marginLeft: "5px", cursor: "pointer" }} onClick={() => setsearchStatus(!searchStatus)}>{!searchStatus ? '展开' : '收起'}</div>
                                                    : null
                                            }
                                        </div>
                                    </Col>
                                    : null
                            }
                        </Row>
                    )
                }
                )
            }
        </Form>
    )
}


export default SearchForm;